.main {
  display: flex;
  min-height: calc(100vh - 160px);
  font-family: cursive;

  ul {
    position: fixed;
    bottom: 72px;
    right: 12px;
    padding: 4px 0;

    >i {
      color: #4A8AF4;
      background: #AAA;
      padding: 8px;
      border-radius: 50%;
    }

    .list-active {
      color: #149E5B;
      background: transparent;
    }

    >i:hover {
      color: #149E5B;
      cursor: pointer;
    }

    li:nth-child(1) {
      color: #666;
    }

    li {
      list-style: none;
      font-size: 16px;
      // color: #4A8AF4;
      color: #149E5B;
      padding: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;

      >i {
        color: #DD5246;
        float: right;
      }

      >i:hover {
        color: #149E5B;
        cursor: pointer;
      }

    }

    li:hover {
      cursor: pointer;
      color: #FFF;
      background-color: #666;
    }

    .active {
      color: #FFF;
      background-color: #666;
    }
  }

  .ul-active {
    width: 240px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, .8);
    min-height: 100px;
    max-height: calc(100vh - 160px);
    overflow: auto;
  }

  .content {
    padding: 0 10%;
  }
}
